<template>
  <sticky :sticky-top="50" :class-name="className">
    <div style="height: auto">
      <div
        class="relative top-search"
        :style="
          isMore
            ? 'height:auto'
            : 'max-height:110px;overflow:hidden;padding-top:14px'
        "
      >
        <form-create
          id="from-searchbar"
          ref="form"
          v-model="formInstance"
          :value.sync="content"
          :rule="searchRule"
          :option="option"
          v-on="$listeners"
        />
      </div>

      <div
        class="relative"
        style="padding-bottom: 8px; margin-bottom: 16px;padding-right:8px"
        :class="buttonRight ? 'text-right' : ''"
        v-if="buttonShow"
      >
        <span
          class="absolute text-center pointer center-horizontal"
          v-if="showMore"
          style="top:0;line-height:12px;color:#606266"
          @click="isMore = !isMore"
          >{{ isMore ? "收起" : "更多" }}<br /><i
            :class="isMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          ></i
        ></span>
        <slot name="btn-group"></slot>
        <el-button
          size="mini"
          type="primary"
          v-if="showSearch"
          @click="$emit('submit', content)"
          >搜索</el-button
        >
        <el-button
          size="mini"
          type="primary"
          v-if="showAdd"
          @click="$emit('add')"
          >{{ addText }}</el-button
        >
        <el-button size="mini" @click="reset" v-if="showClear">重置</el-button>
        <slot name="btn-group-right"></slot>
      </div>
    </div>
  </sticky>
</template>

<script>
import { searchFormOptions } from "@/formRules/index";
export default {
  name: "ListSearchBar",
  props: {
    isMore: {
      default: false,
      type: Boolean
    },
    showMore: {
      default: false,
      type: Boolean
    },
    searchRule: {
      required: true,
      type: Array
    },
    showClear: {
      default: true,
      type: Boolean
    },
    showSearch: {
      default: true,
      type: Boolean
    },
    showAdd: {
      default: true,
      type: Boolean
    },
    addText: {
      default: "新增",
      type: String
    },
    buttonRight: {
      type: Boolean,
      default: false
    },
    buttonShow: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: "top-bar-sticky"
    },
    labelWidth: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      formInstance: {},
      content: {},
      option: searchFormOptions()
    };
  },
  mounted() {
    if (this.labelWidth) {
      this.option = searchFormOptions(this.labelWidth);
    }
    if (!this.buttonShow) {
      this.option = searchFormOptions("40px");
    }
  },
  methods: {
    reset() {
      this?.formInstance?.resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.button-list {
  height: 40px;
  margin-top: -20px;
}
.el-select {
  width: 100%;
}
</style>
